<template>
  <div class="swiper videoSwiper">
    <div
      class="swiper-container"
      id="videoSwiper1"
      :style="`height:${height}px;`"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video
            id="videoRef1"
            ref="videoRef"
            autoplay="true"
            x5-video-player-type="h5"
            x5-playsinline="true"
            webkit-playsinline="true"
            playsinline="true"
            loop="true"
            muted="true"
            src="http://edu-main.cgteamwork.com/1_1646286146307.mp4"
          ></video>
        </div>
      </div>
      <!-- <div class="swiper-cover"></div> -->
      <div class="swiper-msg mx-container"></div>
    </div>
    <div style="color: #fff">标记 6</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      height: null,
      swiper: null,
      active: 0,
      list: [],
      lodaing: true,
    };
  },

  components: {},
  props: {},
  mounted() {
  },
  computed: {
  },
  watch: {
  },
  methods: {
   
  },
  destroyed() {},
};
</script>
<style lang="scss">
@import "swiper/dist/css/swiper.css";
</style>
<style lang='scss' scoped>
@import "@/style/variables.scss";

video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.swiper-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(
    #141414 0%,
    #00000000 40%,
    #00000000 60%,
    #141414 100%
  );
}
.swiper-msg {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  z-index: 2;
  .swiper-msg-top {
    display: flex;
    align-items: center;
    h5 {
      margin: 0 10px 0 0;
    }
  }
  h3 {
    font-size: $fsH1;
  }
  .msg-pagetion {
    display: flex;
    li {
      width: 8px;
      height: 8px;
      margin-right: 8px;
      background-color: #ffffff80;
      border-radius: 4px;
      cursor: pointer;
      &.active {
        background-color: #fff;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .swiper-container {
    height: 6.4rem;
  }
  .swiper-msg {
    // bottom: 8px;
    .swiper-msg-top {
      h5 {
        font-size: 0.32rem;
      }
    }
    h3 {
      font-size: 0.48rem;
      margin: 4px 0 0;
    }
  }
}
</style>